<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { useDeviceStore } from '@/stores'
import { getCommunityQrCodeApi } from '@/services/my'
import { SwitchingDistance } from '@/utils/tools'

const deviceStore = useDeviceStore()
const imgVal = ref('')
const buttonVal = ref('')
const qrcodeRef = ref()
const qrcode = ref()
const defaultVal = ref()
/** 获取社群二维码 */
const getCommunityQrCode = async () => {
  uni.showLoading({
    title: '加载中',
    mask: true,
  })
  try {
    const res = await getCommunityQrCodeApi({ machineId: deviceStore.deviceInfo?.machineId })
    buttonVal.value = res.data || ''
    if (!res.data) {
      defaultVal.value = 'https://yuefanpai.oss-cn-hangzhou.aliyuncs.com/customer_service.png'
    }
    getQrCodeImg()
  } catch (error) {
    uni.hideLoading()
  }
}
/** 二维码转图片 */
const getQrCodeImg = () => {
  if (!qrcodeRef.value || !buttonVal.value) return uni.hideLoading()
  try {
    qrcodeRef.value.make()
    qrcodeRef.value.toTempFilePath({
      success: (res: any) => {
        imgVal.value = res.tempFilePath
        uni.hideLoading()
        console.log(imgVal.value)
      },
    })
  } catch (error) {
    uni.hideLoading()
  }
}
const options = {
  canvasId: qrcode.value,
  margin: 2,
  errorCorrectLevel: 2,
  backgroundImageBorderRadius: 5,
  backgroundPadding: 2,
  backgroundColor: 'rgba(255,255,255,0)',
}
onLoad(() => {
  getCommunityQrCode()
})
</script>

<template>
  <view class="box_image shequn" >
    <view class="main_box">
      <view class="_bgc">
        <view class="machineName_box">
          <view class="dots_left">
            <image src="/static/images/InviteFriends/icon_1.png" mode="scaleToFill"></image
          ></view>
          {{ deviceStore.deviceInfo?.machineName }}
          <view class="dots_right">
            <image src="/static/images/InviteFriends/icon_1.png" mode="scaleToFill"></image
          ></view>
        </view>
      </view>
      <view class="location_box">
        <image
          src="/static/images/community/location1.png"
          mode="scaleToFill"
          class="location"
        ></image>
        距离您{{ SwitchingDistance(deviceStore.deviceInfo?.distanceCenterPoint + 'm') }}</view
      >
      <view class="QR_box">
        <image
          v-if="imgVal"
          :show-menu-by-longpress="true"
          class="QRImg"
          :src="imgVal"
          mode="scaleToFill"
        />
        <image
          v-else
          :show-menu-by-longpress="true"
          class="QRImg"
          :src="defaultVal"
          mode="scaleToFill"
        />
      </view>
      <uqrcode
        v-show="false"
        ref="qrcodeRef"
        canvas-id="qrcode"
        :value="buttonVal"
        :options="options"
      ></uqrcode>
      <view v-if="buttonVal" class="_shouzhi">
        <cell :url="buttonVal"></cell>
      </view>
      <view class="_left">
        <text class="_left_text"
          >{{ buttonVal ? '点击/长按二维码进入群聊' : '暂无社群' }}
          {{ buttonVal ? '群内好礼等你领' : '长按添加福利官查看好礼' }}</text
        >
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.box_image {
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('https://yuefanpai.oss-cn-hangzhou.aliyuncs.com/shequn_bg.png');
  background-size: 100vw 100vh;
  background-position: center;
  background-repeat: no-repeat;
  .main_box {
    margin-top: 26.24vh;
    width: 650rpx;
    background-color: #fff;
    border: 4rpx solid #000;
    padding-bottom: 180rpx;
  }
  .QR_box {
    width: 500rpx;
    height: 500rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('/static/images/goodsDetails/qrCodeBg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    .QRImg {
      width: 370rpx;
      height: 370rpx;
      z-index: 999999;
    }
  }

  .location_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54rpx 0 28rpx;
    color: #362000;
    .location {
      width: 26rpx;
      height: 30rpx;
      margin-right: 18rpx;
    }
  }
  ._bgc {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background: #ffdc17;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 4rpx solid #000;
    .machineName_box {
      display: flex;
      align-items: center;
      justify-content: center;
      .dots_left,
      .dots_right {
        margin: 0 20rpx;
        image {
          width: 30rpx;
          height: 36rpx;
        }
      }
    }
  }
  ._shouzhi {
    margin: 30rpx 0 0 0;
  }
  ._left,
  ._right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 650rpx;
    font-size: 28rpx;
    color: #000;
  }
}
</style>
